<template>
  <div class="info-form-group">
    <div class="info-form-group-title mb30">基本信息</div>
    <div class="info-form-group-content fr4">
      <el-form-item label="产品类型" prop="type">
        <el-select v-model="formData.type" placeholder="请选择车" clearable @change="agvTypeChange" @close="closeAgvType">
          <el-option v-for="item in getDict('productId')" :key="item.name" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="产品型号" prop="productCategoryId">
        <el-select
          v-model="formData.productCategoryId"
          placeholder="请选择"
          clearable
          @change="agvModelChange"
          @close="closeAgvModel"
        >
          <el-option v-for="item in selectList['productModelList']" :key="item.name" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="订单编号" prop="orderCode">
        <el-input v-model="formData.orderCode" placeholder="请输入" clearable></el-input>
      </el-form-item> -->
      <el-form-item label="所属订单" prop="projectId">
        <el-select v-model="formData.projectId" placeholder="请选择" clearable :filterable="true" @change="agvProjectChange">
          <el-option v-for="item in selectList['projectList']" :key="item.id" :label="item.nameClone" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="出厂时间" prop="productionTime">
        <el-date-picker
          v-model="formData.productionTime"
          type="date"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择"
        />
      </el-form-item>
      <el-form-item label="车架号" prop="code">
        <el-input v-model="formData.code" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <!-- <el-form-item label="主控ID" prop="controllerId">
        <el-input v-model="formData.controllerId" placeholder="请输入" clearable></el-input>
      </el-form-item> -->
      <el-form-item label="仪表ID" prop="deviceId">
        <el-input v-model="formData.deviceId" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item label="标准货叉外间距（mm）" prop="forkSpacing">
        <el-input-number :controls="false" v-model="formData.forkSpacing" placeholder="请输入" clearable></el-input-number>
      </el-form-item>

      <el-form-item label="货叉尺寸长度（mm）" prop="forkLength">
        <el-input-number :controls="false" v-model="formData.forkLength" placeholder="请输入" clearable></el-input-number>
      </el-form-item>
      <el-form-item label="货叉尺寸宽度（mm）" prop="forkWidth">
        <el-input-number :controls="false" v-model="formData.forkWidth" placeholder="请输入" clearable></el-input-number>
      </el-form-item>
      <el-form-item label="货叉尺寸厚度（mm）" prop="forkThickness">
        <el-input-number :controls="false" v-model="formData.forkThickness" placeholder="请输入" clearable></el-input-number>
      </el-form-item>

      <el-form-item label="AE/AR 空载 前轮载荷" prop="aeArEmptyFrontWheelLoad">
        <el-input v-model="formData.aeArEmptyFrontWheelLoad" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item label="AE/AR 空载 后轮载荷" prop="aeArEmptyRearWheelLoad">
        <el-input v-model="formData.aeArEmptyRearWheelLoad" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item label="AE/AR 满载 前轮载荷" prop="aeArFullFrontWheelLoad">
        <el-input v-model="formData.aeArFullFrontWheelLoad" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item label="AE/AR 满载 后轮载荷" prop="aeArFullRearWheelLoad">
        <el-input v-model="formData.aeArFullRearWheelLoad" placeholder="请输入" clearable></el-input>
      </el-form-item>
    </div>
  </div>
  <div class="info-form-group" v-if="!isEdit">
    <div class="info-form-group-title mb30">位置信息</div>
    <div class="info-form-group-content fr2">
      <div class="info-form-group-content fr2">
        <el-form-item label="仪表硬件版本" prop="deviceHwVersion">
          <el-input v-model="formData.deviceHwVersion" placeholder="--" clearable></el-input>
        </el-form-item>
        <el-form-item label="仪表软件版本" prop="deviceSwVersion">
          <el-input v-model="formData.deviceSwVersion" placeholder="--" clearable></el-input>
        </el-form-item>
        <el-form-item label="车辆锁车状态" prop="lockState">
          <el-input v-model="formData.lockState" placeholder="--" clearable></el-input>
        </el-form-item>
        <el-form-item label="车辆状态" prop="state">
          <el-input v-model="formData.state" placeholder="--" clearable></el-input>
        </el-form-item>
        <el-form-item label="水平精度" prop="hdop">
          <el-input v-model="formData.hdop" placeholder="--" clearable></el-input>
        </el-form-item>
        <el-form-item label="GPS采集时间" prop="gpsCollectTime">
          <el-input v-model="formData.gpsCollectTime" placeholder="--" clearable></el-input>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="formData.latitude" placeholder="--" clearable></el-input>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="formData.longitude" placeholder="--" clearable></el-input>
        </el-form-item>
        <el-form-item label="上线时间" prop="onlineTime">
          <el-input v-model="formData.onlineTime" placeholder="--" clearable></el-input>
        </el-form-item>
        <el-form-item label="下线时间" prop="offlineTime">
          <el-input v-model="formData.offlineTime" placeholder="--" clearable></el-input>
        </el-form-item>
      </div>
      <div class="map">
        <Map :lng="formData.lng" :lat="formData.lat" v-if="formData.lng && formData.lat" />
        <div class="empty" v-else>暂无经纬度</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { inject } from "vue";
import { useDict } from "@/hooks/useDict";
import { useUtils } from "../../hooks/useUtils";
import Map from "../..//Map/index.vue";

const { getDict } = useDict(["productId"]);
const { getProductModelAllFn } = useUtils();
// 变量
const isEdit = inject("isEdit");
const selectList = defineModel("selectList", { type: Object, default: () => {} });
const formData = defineModel("formData", {
  type: Object,
  default: () => {}
});
const agvTypeChange = async (val: string) => {
  const data = await getProductModelAllFn(val);
  selectList.value["productModelList"] = data;
  formData.value.productCategoryId = undefined;
  formData.value.productCategoryName = "";
  formData.value.picture = "";
};
const closeAgvType = () => {
  selectList.value["productModelList"] = [];
  formData.value.productCategoryId = undefined;
  formData.value.productCategoryName = "";
  formData.value.picture = "";
};
const agvModelChange = (val: string) => {
  const model: any = selectList.value["productModelList"].find(item => item.id === val);
  if (model) {
    formData.value.picture = model.picture;
    formData.value.productCategoryName = model.name;
  }
};
const closeAgvModel = () => {
  formData.value.productCategoryName = "";
  formData.value.picture = "";
};
const agvProjectChange = (val: string) => {
  const model: any = selectList.value["projectList"].find(item => item.id === val);
  if (model) {
    formData.value.orderCode = model.code;
  }
};
</script>
<style lang="scss" scoped>
.map {
  background: #f5f7fa;
}
.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #999999;
  text-align: center;
}
</style>
